// JavaScript Document
/* 创建3D效果类 */
function Pic3D( obj ){
    this.boxId = (obj&&obj.boxId) || "pic3DBox";
    this.prevClass =(obj&&obj.prevClass)|| "prev";
    this.nextClass = (obj&&obj.nextClass)|| "next";
    this.currentClass = (obj&&obj.currentClass) || "current";
    this.prevBtn = (obj&&obj.prevBtn) || "pic3DPrev";
    this.nextBtn = (obj&&obj.nextBtn) || "pic3DNext";
    this.isBtn = (obj&&obj.isBtn) || true;  // 是否允许有按钮
}
// 初始化方法
Pic3D.prototype.init = function(){
    // 初始化相关标签
    var _this = this;
    _this.boxEle = document.getElementById( _this.boxId );
    _this.ul = _this.boxEle.getElementsByTagName("ul")[0];
    _this.liEles = _this.boxEle.getElementsByTagName("li");
    if( !!_this.isBtn){
        _this.prevEle = document.getElementById( _this.prevBtn );
        _this.nextEle = document.getElementById( _this.nextBtn );
    }
    // 初始化当前展示图片序号
    _this.nowp = 0 ;
 
    _this.addEvents(); //  给标签添加事件
};
// 添加事件方法
Pic3D.prototype.addEvents = function(){
    var _this = this;
    var  i = 0 ;
    var  lis = _this.liEles;
    // 如果 图片个数少于3个，克隆出来，凑足3个
    if( lis.length < 3 ){
        for(var k = 0 ; k <= 3-lis.length; k++){
            var newLi = lis[0].cloneNode(true);
            _this.ul.appendChild( newLi );
        }
        _this.liEles = _this.boxEle.getElementsByTagName("li"); // 重新获取 li
        lis = _this.liEles;
    }
    // 初始化class
    lis[0].className = _this.currentClass;
    lis[1].className = _this.nextClass;
    lis[lis.length-1].className = _this.prevClass;
 
    // 遍历 i 标签
    for( i=0 ; i <= lis.length-1 ; i++){
        lis[i].index = i;  //  给每个图片一个索引
        lis[i].onclick = function(e){   // 给每个图片添加点击事件
            var el = this;
            var n = el.index;
            _this.nowp = n;
            // 如果图片上有指定的类，就阻止默认事件，不要跳转页面。
            if( el.className === _this.nextClass || el.className === _this.prevClass ){
                e.preventDefault();
            }
            _this.showPic(n); // 展示第n张图
        }
    }
 
    // 按钮事件
    if( !!_this.isBtn){
        _this.prevEle.onclick = function(e){
            var  el = this;  // 防止跟对象的 this 搞混。
            var n = _this.nowp;   // 当前要展示的图片的索引
            n--;
            if( n < 0 ){
                n= lis.length-1;
            }
            _this.showPic(n); // 展示第n张图
            _this.nowp = n;
        };
        _this.nextEle.onclick = function(e){
            var  el = this;   // 防止跟对象的 this 搞混。
            var n = _this.nowp;  // 当前要展示的图片的索引
            n++;
            if( n >= lis.length ){
                n=0;
            }
            _this.showPic(n); // 展示第n张图
            _this.nowp = n;
        };
    }
};
// 图片展示方法。本质就是给标签增加类，删除类。
Pic3D.prototype.showPic = function(n){
    console.info(n);
    var _this = this;
    var lis = _this.liEles;
    var nextLi,prevLi;
    if( n === lis.length-1 ){
        nextLi = 0;
    }else{
        nextLi = n + 1;
    }
    if( n === 0 ){
        prevLi = lis.length - 1;
    }else{
        prevLi = n-1;
    }
    for(var i=0 ; i<=lis.length-1 ; i++){
        lis[i].className = "";
    }
    lis[n].className = _this.currentClass;
    lis[nextLi].className = _this.nextClass;
    lis[prevLi].className = _this.prevClass;
};
 
var mypic = new Pic3D();
mypic.init({
    boxId:"pic3DBox",
    prevClass:"prev",
    nextClass:"next",
    currentClass:"current",
    prevBtn:"pic3DPrev",
    nextBtn:"pic3DNext",
    isBtn:true
});
 